<template>
  <div style="display: flex; width: 100%">
    <div class="attachmentManagement">
      <div class="management-title">附件管理</div>
      <div class="management-number">文件（{{ total }}/3）</div>
      <div class="management-content" v-for="(item, index) in attachmentResume" :key="index">
        <div>
          <img src="@/assets/img/ppt图标.png" alt="" style="width: 44px;" />
        </div>
        <div style="width: 90%; margin-left: 5px">
          <div style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
            <a href="#" style="width: 100px;">简历.pdf</a>
            <div style="width: 200px">
              <el-link :underline="false" class="but pre" @click="perviewResume(item.resumeUrl)">预览</el-link>
              <a :href="item.resumeUrl"><el-link :underline="false" class="but">下载</el-link></a>
              <el-link :underline="false" class="but del" @click="delResume(item.id)">删除</el-link>
            </div>
          </div>
          <div style="font-size: 12px; color: #8d92a1">
            324.6KB 更新于2023-03-15 15:30
          </div>
        </div>
      </div>
    </div>
    <div class="attachmentUpload">
      <el-upload class="upload-demo" drag action="http://81.71.154.186:8088/api/files/uploadFile" multiple
        :on-success="handleAvatarSuccess" :headers="uploadHeaders">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          <div class="text-div" style="background-color: var(--button-color);">请上传文件/拖拽文件</div>
        </div>
      </el-upload>
    </div>

    <el-dialog v-model="dialogVisible" title="在线预览附件简历" width="1000" :before-close="handleClose">
      <div>
        <iframe id="resume-iframe" :src="pdfUrl" style="width: 100%; height: 100vh"></iframe>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, UploadProps } from "element-plus";
import { ref } from "vue";
import * as commonUtil from "@/utils/commonUtil";
import { getAttachment, delAttachment } from "@/api/attachmentResume";

const resumeFile = ref();
const token = ref();

const dialogVisible = ref(false);
//获取token
token.value = commonUtil.getStore("token");

const uploadHeaders = ref({ token: token.value });

// 上传简历部分
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  resumeFile.value = URL.createObjectURL(uploadFile.raw!);
  queryAttachmentResume();
};

// 获取附件简历
const attachmentResume = ref();
const total = ref();
const pageNum = ref(1);
const pageSize = ref(3);
const queryAttachmentResume = async () => {
  const res = await getAttachment(pageNum.value, pageSize.value);
  console.log(res);
  attachmentResume.value = res.data.list;
  total.value = res.data.list.length;
};
queryAttachmentResume();

// 删除简历
const delResume = async (id) => {
  const res = await delAttachment(id);
  ElMessage.success(res.msg);
  queryAttachmentResume();
};

// 预览简历
const pdfUrl = ref();
const perviewResume = (url) => {
  pdfUrl.value = url;
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
* {
  background-color: var(--background-color);
}

a {
  text-decoration: none;
  color: black;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 5px;
}

.attachmentManagement {
  width: 300px;
  // background-color: rgb(255 255 255);
  background-color: var(--button-color);
  border-radius: 10px;
  position: relative;

  .management-title {

    padding: 5px;
    font-size: 18px;
    font-weight: 300;
    // background-color: rgb(247 247 247);
    background-color: var(--button-color);
    border-radius: 10px 10px 0 0;
  }

  .management-number {
    padding: 5px;
    font-size: 14px;
    font-weight: 300;
    background-color: var(--button-color);
  }

  .management-content {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    // background-color: rgb(247 247 247);
    background-color: var(--button-color);
    display: flex;
    align-items: center;

    .but {
      padding: 0px 10px 0px 10px;
    }

    .pre:hover {
      color: #67c23a;
    }

    .del:hover {
      color: #f56c6c;
      /* 删除链接的颜色 */
    }
  }
}

.attachmentUpload {
  margin-left: 10%;
  width: 40%;
}

:deep(.el-upload-dragger) {
  // background-color: var(--el-fill-color-blank);
  background-color: var(--button-color);
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  padding: var(--el-upload-dragger-padding-horizontal) var(--el-upload-dragger-padding-vertical);
  position: relative;
  text-align: center;
  width: 100%;
}
</style>
